<template>
	<view>
		<form v-if="shows">
			<!-- <view class="imagesProblem">

				<view class="imageSource">
					<view class="source">图片来源</view>
					<picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex" mode="selector">
						<view class="choiceSource">{{sourceType[sourceTypeIndex]}}</view>
					</picker>
				</view>

				<view class="imageQuality">
					<view class="quality">图片质量</view>
					<picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector">
						<view class="choiceQuality">{{sizeType[sizeTypeIndex]}}</view>
					</picker>
				</view>

				<view class="numberLimit">
					<view class="number">数量限制</view>
					<picker :range="count" @change="countChange" mode="selector">
						<view class="choiceNumber">{{count[countIndex]}}</view>
					</picker>
				</view>

			</view> -->


			<view class="uploader">
				<view class="uploaderHead">
					<text class="uploaderTitle">点击可预览选好的图片</text>
					<text class="uploaderInfo">{{imageList.length}}/9</text>
				</view>
				<view class="uploaderBody">
					<view class="uploaderFiles">
						<block v-for="(image,index) in imageList" :key="index">
							<view class="uploaderFile">
								<image mode="aspectFill" class="uploaderImg" :src="image" :data-src="image" @tap="previewImage"></image>
								<!-- stop停止冒泡 -->
								<text class="iconfont icon-shanchu delete" @tap.stop="deleteImages(index)"></text>
							</view>
						</block>
						<!-- 点击添加框选择可以图片 -->
						<view class="uploaderBox" @tap="chooseImage"></view>
					</view>
				</view>
			</view>
		</form>
	</view>
</template>
<script>
	import permision from "@/common/permission.js"
	let sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	];
	let sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	];
	export default {
		props: {
			listArr: {
				type: Array,
				default: [],
			},
			shows: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				title: 'choose/previewImage',
				imageList: [],
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
			}
		},
		mounted() {
			this.imageList = this.listArr;
		},
		onUnload() { //在监听页面卸载时做的事情
			this.imageList = [],
				this.sourceTypeIndex = 2,
				this.sourceType = ['拍照', '相册', '拍照或相册'],
				this.sizeTypeIndex = 2,
				this.sizeType = ['压缩', '原图', '压缩或原图'],
				this.countIndex = 8;
		},
		methods: {
			sourceTypeChange(e) {
				this.sourceTypeIndex = parseInt(e.detail.value)
			},
			sizeTypeChange: function(e) {
				this.sizeTypeIndex = parseInt(e.detail.value)
			},
			countChange: function(e) {
				this.countIndex = e.detail.value;
			},
			async chooseImage() {
				// #ifdef APP-PLUS
				// TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
				if (this.sourceTypeIndex !== 2) {
					let status = await this.checkPermission();
					if (status !== 1) {
						return;
					}
				}
				// #endif

				if (this.imageList.length === 9) {
					let isContinue = await this.isFullImg();
					console.log("是否继续?", isContinue);
					if (!isContinue) {
						return;
					}
				}
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
						this.$emit("choose", this.imageList);
					},
					fail: (err) => {
						// #ifdef APP-PLUS
						if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
							this.checkPermission(err.code);
						}
						// #endif
						// #ifdef MP
						uni.getSetting({
							success: (res) => {
								let authStatus = false;
								switch (this.sourceTypeIndex) {
									case 0:
										authStatus = res.authSetting['scope.camera'];
										break;
									case 1:
										authStatus = res.authSetting['scope.album'];
										break;
									case 2:
										authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
										break;
									default:
										break;
								}
								if (!authStatus) {
									uni.showModal({
										title: '授权失败',
										content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
										success: (res) => {
											if (res.confirm) {
												uni.openSetting()
											}
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			isFullImg: function() {
				return new Promise((res) => {
					uni.showModal({
						content: "已经有9张图片了,是否清空现有图片？",
						success: (e) => {
							if (e.confirm) {
								this.imageList = [];
								res(true);
							} else {
								res(false)
							}
						},
						fail: () => {
							res(false)
						}
					})
				})
			},
			previewImage(e) {
				let current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			async checkPermission(code) {
				let type = code ? code - 1 : this.sourceTypeIndex;
				let status = permision.isIOS ? await permision.requestIOS(sourceType[type][0]) :
					await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' :
						'android.permission.READ_EXTERNAL_STORAGE');

				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "没有开启权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			},

			// 删除图片
			deleteImages(index) {
				uni.showModal({
					title: "提示",
					content: "是否要删除该图片",
					showCancel: true,
					cancelText: "不删除",
					confirmColor: "删除",
					success: res => {
						// 成功了之后还需要判断，判断用户点击了那个按钮了
						if (res.confirm) {
							this.imageList.splice(index, 1);
							this.$emit("change", this.imageList);
						};
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.imagesProblem {
		background-color: red;
	}

	.imageSource,
	.imageQuality,
	.numberLimit {
		width: 100%;
		height: 80rpx;
		@include flexCenterCenter;

		.choiceSource,
		.choiceQuality,
		.choiceNumber {
			@include flexCenterCenter;
		}
	}

	.uploader {
		width: 100%;
		margin-top: 20rpx;
	}

	.uploaderHead {
		width: 100%;
		@include flexBetweenCenter;

		.uploaderTitle {
			flex: 2;
		}

		.uploaderInfo {
			flex: 1;
			// text-align: center;
			text-align: right;
		}
	}

	// 点击选择图片
	.uploaderBody {
		margin-top: 16rpx;
	}

	.uploaderFiles {
		display: flex;
		flex-wrap: wrap;
		// 看需不需要做水平方向的居中了
		justify-content: space-between;

		.uploaderFile {
			margin: 10rpx;
			width: 210rpx;
			height: 210rpx;
			position: relative;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.uploaderImg {
			display: block;
			width: 210rpx;
			height: 210rpx;
		}
	}

	.uploaderBox {
		position: relative;
		margin: 10rpx;
		width: 208rpx;
		height: 208rpx;
		border: 2rpx solid #D9D9D9;

		// 添加框内的 ＋ 号
		&::after,
		&::before {
			content: " ";
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			background-color: #D9D9D9;
		}

		&::after {
			width: 79rpx;
			height: 4rpx;
		}

		&::before {
			width: 4rpx;
			height: 79rpx;
		}

		// 点击添加框(激活)的边框样式
		&:active {
			border-color: #999999;
			// border-color: red;

			// ＋ 号的背景样式
			&::after,
			&::before {
				// background-color: red;
				background-color: #999999;
			}
		}
	}

	// 删除图标
	.delete {
		display: inline-block;
		z-index: 100;
		position: absolute;
		top: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .4);
		font-size: 40rpx;
		padding: 10rpx;
		color: #FF0000;
	}
</style>
